<template>
  <div class="total">
    <ListTitle list-title="空域运行间隔评估"></ListTitle>
    <div class="table-choice">
      <button @click="selectUpdown" :class="['button', { active: selectedButton === 'updown' }]">
        <span class="text_button">起降区</span>
      </button>
      <button @click="selectRoute" :class="['button', { active: selectedButton === 'route' }]">
        <span class="text_button">航路</span>
      </button>
      <button @click="selectTask" :class="['button', { active: selectedButton === 'task' }]">
        <span class="text_button">作业区域</span>
      </button>
    </div>
    <div class="layout1">
      <div class="left_table">
        <div class="operation-bar">
          <span class="text_input">名称</span>
          <input type="text" class="search-input" placeholder="请输入" v-model="searchKeyword"
            style="padding-left: 1.2rem;" />
          <span class="text_input1">类型</span>
          <select v-model="order" class="dropdown-native" placeholder=" ">
            <option class="selectOption" value=null>全体类型</option>
            <option v-for="(type, index) in typeOptions" :key="index" :value="type.value" class="selectOption">{{
              type.label }}</option>
          </select>
          <el-button type="primary" icon="el-icon-search" class="el-query-button" @click="handleSearch">查询</el-button>

        </div>
        <div class="table_p">
          <TableComponent :tableData="tableData" @row="displayRowData" :name_label="name_label"
            :airspaceTypes="airspaceTypes" />
        </div>
      </div>
      <div style="width: 23%; margin-left: 1%;">
        <FormComponent :formData="formData" @run-clicked="handleRun" />
      </div>
      <div class="form-container" v-loading="loading_fu">
        <div class="title_plat">
          <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
          <span class="text_form">横向安全间隔（m）</span>
        </div>
        <div class="plat-form">
          <ManagementPlatform :aircraftTypes="[
            // { name: '航空器类型 I', values: this.showlist1 },
            // { name: '航空器类型 II', values: this.showlist2 },
            // { name: '航空器类型 III', values: this.showlist3 },
            // { name: '航空器类型 IV', values: this.showlist4 }
            { name: '小型机', values: this.showlist1 },
            { name: '中型机', values: this.showlist2 },
            { name: '大型机', values: this.showlist3 },
            { name: '复合翼', values: this.showlist4 }
          ]" />
        </div>
        <div class="title_plat">
          <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
          <span class="text_form">纵向安全间隔（m）</span>
        </div>
        <div class="plat-form">
          <ManagementPlatform :aircraftTypes="[
            // { name: '航空器类型 I', values: this.showlist5 },
            // { name: '航空器类型 II', values: this.showlist6 },
            // { name: '航空器类型 III', values: this.showlist7 },
            // { name: '航空器类型 IV', values: this.showlist8 }
            { name: '小型机', values: this.showlist5 },
            { name: '中型机', values: this.showlist6 },
            { name: '大型机', values: this.showlist7 },
            { name: '复合翼', values: this.showlist8 }
          ]" />
        </div>
        <div class="title_plat">
          <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
          <span class="text_form">垂直安全间隔（m）</span>
        </div>
        <div class="plat-form">
          <ManagementPlatform :aircraftTypes="[
            // { name: '航空器类型 I', values: this.showlist9 },
            // { name: '航空器类型 II', values: this.showlist10 },
            // { name: '航空器类型 III', values: this.showlist11 },
            // { name: '航空器类型 IV', values: this.showlist12 }
            { name: '小型机', values: this.showlist9 },
            { name: '中型机', values: this.showlist10 },
            { name: '大型机', values: this.showlist11 },
            { name: '复合翼', values: this.showlist12 }
          ]" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle";
import ManagementPlatform from '@/components/plat_table.vue';
import TableComponent from '@/components/Table4.vue';
import axios from 'axios';
import FormComponent from '@/components/Form4Safe.vue';

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE4;

export default {
  name: "Module4SafetyInterval",
  components: {
    ManagementPlatform,
    TableComponent,
    ListTitle,
    FormComponent
  },
  data() {
    return {
      order: null,
      tableData: [],
      formData: [],
      name_label: "起降区名称",
      showContent: false,
      showNewInput: false,
      row: null,
      searchKeyword: '',
      matchitem: [],
      selectedRow: null,
      api_post: '',
      name_option1: true,
      name_option2: false,
      name_option3: false,
      showlist1: [],
      showlist2: [],
      showlist3: [],
      showlist4: [],
      showlist5: [],
      showlist7: [],
      showlist6: [],
      showlist8: [],
      showlist9: [],
      showlist10: [],
      showlist11: [],
      showlist12: [],
      showlist13: [],
      showlist14: [],
      showlist15: [],
      showlist16: [],
      splitData: [],
      quiry_ui: `${baseApi}/takeoffland/search`,
      selectedButton: 'updown', // 默认高亮'起降区'按钮
      typeOptions: [
        { value: 0, label: '小型' },
        { value: 1, label: '中型' },
        { value: 2, label: '大型' }
      ], // 用于存储动态更新的类型选项
      // 以下是类型定义
      airspaceTypes: {
        updown: [
          { value: 0, label: '小型' },
          { value: 1, label: '中型' },
          { value: 2, label: '大型' }
        ],
        route: [
          { value: 0, label: '低速' },
          { value: 1, label: '中速' },
          { value: 2, label: '高速' },
          { value: 3, label: '匝道' }
        ],
        task: [
          { value: 0, label: '即时配送' },
          { value: 1, label: '科技文旅' },
          { value: 2, label: '城市治理' },
          { value: 3, label: '立体交通' },
          { value: 4, label: '边境管控' }
        ]
      },
      loading_fu: false,
    };
  },
  created() {
    // this.fetchTableData('http://47.99.75.194:8084/takeoffland/selectall');
    // this.fetchFormData('http://47.99.75.194:8084/takeoffland/idsafeintervalall');
    this.fetchTableData(`${baseApi}/takeoffland/search`);
    this.fetchFormData(`${baseApi}/takeoffland/idsafeintervalall`);
  },
  methods: {
    async handleSearch() {
      this.keytext = this.searchKeyword;
      await this.fetchAirspaceDemand();
    },
    async fetchAirspaceDemand() {
      try {
        const params = {};
        console.log("order", this.order);
        console.log("searchkey", this.keytext);
        if (this.order == 0 || this.order == 1 || this.order == 2) {
          const orderAsInt = parseInt(this.order, 10);
          console.log("orderInt", orderAsInt);
          if (!isNaN(orderAsInt)) {
            params.type = orderAsInt;
          }
        }
        if (this.keytext) {
          params.index = this.keytext;
        }
        console.log("查询数据", params)
        const response = await axios.get(this.quiry_ui, { params });
        this.tableData = response.data.data;
        console.log("airspaceDemand接口返回的数据", response.data.data)
      } catch (error) {
        console.error('Error fetching airspace demand:', error);
      }
    },
    async fetchTableData(api_post) {
      console.log("fetchTableData  执行", api_post)
      try {
        const response = await axios.get(api_post);
        console.log(response.data);
        if (response.data.code === 0) {
          this.tableData = response.data.data;
          console.log("fetchTableData  执行完成,done")
          console.log(response.data);
        }
      }
      catch (error) {
        console.error('获取数据失败', error);
      }
    },
    async fetchFormData(api_post) {
      console.log("fetchFormData  执行")
      try {
        const response = await axios.get(api_post)
        console.log(response.data);
        if (response.data.code === 0) {
          this.formData = response.data.data;
          console.log("fetchFormData  执行完成,done")
          console.log(response.data);
        }
      }
      catch (error) {
        console.error('获取数据失败', error);
      }
    },
    displayRowData(row) {
      console.log("rowdata ", row)
      this.selectedRow = row;
      // this.getSplitDataById(row.id)
    },
    async handleRun(payload) {
      console.log("handleRun 执行")
      console.log("选中的模型是：", payload.selectedModels);
      // this.getSplitDataById(this.selectedRow.id)
      this.getSplitDataById(this.selectedRow.id, payload.selectedModels);
    },
    getSplitDataById(id, selectedModels) {
      console.log('开始分割数据,被分割的this.formData id', this.formData, id)

      const matchedItem = this.formData.find((item) => item.id === id);
      if (!matchedItem) return;

      // 1. 统计选中模型数量
      const selectedCount = Object.values(selectedModels).filter(Boolean).length;

      // 2. 根据数量确定缩放系数
      let scale = 1;
      if (selectedCount === 1) scale = 0.7;
      else if (selectedCount === 2) scale = 0.75;
      else if (selectedCount === 3) scale = 0.8;
      else if (selectedCount === 4) scale = 0.85;

      // 3. 缩放 safeInterval 数据（3维数组：3 x 4 x N）
      const scaledSafeInterval = matchedItem.safeInterval.map(row =>
        row.map(list =>
          list.map(val => (typeof val === 'number' ? (val * scale).toFixed(2) : val))
        )
      );

      // 4. 赋值到对应显示数组
      [
        this.showlist1, this.showlist2, this.showlist3, this.showlist4,
        this.showlist5, this.showlist6, this.showlist7, this.showlist8,
        this.showlist9, this.showlist10, this.showlist11, this.showlist12
      ] = scaledSafeInterval.flat();
    },
    // getSplitDataById(id) {
    //   console.log('开始分割数据,被分割的this.formData  id', this.formData, id)

    //   const matchedItem = this.formData.find((item) => item.id === id);
    //   // console.log(matchedItem)
    //   this.showlist1 = matchedItem.safeInterval[0][0];
    //   this.showlist2 = matchedItem.safeInterval[0][1];
    //   this.showlist3 = matchedItem.safeInterval[0][2];
    //   this.showlist4 = matchedItem.safeInterval[0][3];
    //   this.showlist5 = matchedItem.safeInterval[1][0];
    //   this.showlist6 = matchedItem.safeInterval[1][1];
    //   this.showlist7 = matchedItem.safeInterval[1][2];
    //   this.showlist8 = matchedItem.safeInterval[1][3];
    //   this.showlist9 = matchedItem.safeInterval[2][0];
    //   this.showlist10 = matchedItem.safeInterval[2][1];
    //   this.showlist11 = matchedItem.safeInterval[2][2];
    //   this.showlist12 = matchedItem.safeInterval[2][3];
    // },
    selectUpdown() {
      this.selectedButton = 'updown';
      this.typeOptions = this.airspaceTypes.updown;
      this.fetchTableData(`${baseApi}/takeoffland/search`);
      this.name_label = "起降区名称";
      this.fetchFormData(`${baseApi}/takeoffland/idsafeintervalall`);
      this.quiry_ui = `${baseApi}/takeoffland/search`;
    },
    selectRoute() {
      this.selectedButton = 'route';
      this.typeOptions = this.airspaceTypes.route;
      this.fetchTableData(`${baseApi}/airlane/search`);
      this.quiry_ui = `${baseApi}/airlane/search`;
      this.name_label = "航路名称";
      this.fetchFormData(`${baseApi}/airlane/idsafeintervalall`);
    },
    selectTask() {
      this.selectedButton = 'task';
      this.typeOptions = this.airspaceTypes.task;
      this.fetchTableData(`${baseApi}/workzone/search`);
      this.quiry_ui = `${baseApi}/workzone/search`;
      this.name_label = "工作区名称";
      this.fetchFormData(`${baseApi}/workzone/idsafeintervalall`);
    },
  }
};
</script>

<style scoped>
h1 {
  color: #ffffff;
}

.total {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;

}

.table-choice {
  display: flex;
  /* justify-content: flex-start; */
  margin-top: 0.2rem;
  /* align-items: center; */
  height: 2.25rem;
  width: 100%;
}

.button {
  display: flex;
  height: 2.25rem;
  background: url(../assets/img/module4/part1/SketchPng672f442656b7e0f3c9863869768a199363cee97583efcf5fc791168bad3b2f9f.png) -0.125rem -0.0625rem no-repeat;
  background-size: 12.9375rem 2.5625rem;
  width: 12.5rem;
  border: none;

}

.button:hover {
  background: url(../assets/img/module4/part1/SketchPng09fb34004ea1b0e5e91ff03feafa38bcb15201eba65a4db7b12083a8412bcc68.png) -0.125rem -0.0625rem no-repeat;
  height: 2.25rem;
  background-size: 12.9375rem 2.5625rem;
  width: 12.5rem;
  border: none;
}

.button.active {
  background: url(../assets/img/module4/part1/SketchPng09fb34004ea1b0e5e91ff03feafa38bcb15201eba65a4db7b12083a8412bcc68.png) -0.125rem -0.0625rem no-repeat;
  height: 2.25rem;
  background-size: 12.9375rem 2.5625rem;
  width: 12.5rem;
  border: none;
}

.text_button {
  width: 3rem;
  height: 1.5625rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1rem;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  text-align: center;
  white-space: nowrap;
  line-height: 1.5625rem;
  margin: 0.1875rem 0 0 4.15rem;
}

.image1 {
  margin-left: 1%;
  height: 85%;

}



.layout1 {
  display: flex;
  align-items: stretch;
  /* 使左边表格和右边表单在纵向上对齐 */
  width: 100%;
  height: 85%;
  margin-top: 0.8125rem;
}

.table_p {
  width: 100%;
  height: 97.5%;
  overflow: auto;
}


.form-container {
  display: flex;
  width: 72%;
  /* 固定外框的宽度 */
  height: 100%;
  /* 固定外框的高度 */
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  border: 0.0625rem solid;
  margin-top: 0.375rem;
  flex-direction: column;
  margin-left: 1%;
  position: relative;
}

.plat_total {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  /* margin-top: 2%; */
}

.plat-form {
  height: 11.25rem;
  /* width: 62.5rem; */
  width: 90%;
  margin: 0.75rem 0 0 3.4375rem;
}

.left_table {
  width: 27%;
  height: 100%;
}

.operation-bar {
  display: flex;
  /* align-items: center; */
  width: 100%;
  height: 2rem;

}

.text_input {
  width: 1.75rem;
  height: 1.25rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.875rem;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25rem;
  margin-top: 0.255rem;
  font-family: AlibabaPuHuiTi_2_55_Regular;

}

.text_input1 {
  width: 1.75rem;
  height: 1.25rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.875rem;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25rem;
  margin-top: 0.255rem;
  margin: 0.375rem 0 0 1.5rem;
  font-family: AlibabaPuHuiTi_2_55_Regular;

}



.dropdown-native {
  width: 6.25rem;
  height: 2rem;
  background: url("../assets/img/module4/part1/table3.png") 100% no-repeat;
  border: none;
  color: rgba(255, 255, 255, 1);
  background-size: 100% 100%;
  margin-left: 0.625rem;
}

.dropdown-native::placeholder {
  color: white !important;
}

.native-action-button img {
  width: 100%;
  height: auto;
}


.selectOption {
  color: #000000;

}

.search-input::placeholder {
  width: 2.625rem;
  height: 1.25rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 0.875rem;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25rem;
  margin: 0.375rem 0 0 0.875rem;
}

.search-input {
  height: 2rem;
  background: url("../assets/img/module4/part1/table3.png") 100% no-repeat;
  border: none;
  background-size: 100% 100%;
  font-size: 0.875rem;
  font-weight: NaN;
  color: rgba(255, 255, 255, 1);
  margin-left: 0.625rem;
  width: 7.875rem;
}

.el-query-button {
  height: 2rem;
  width: 4.5rem;
  margin-left: 1.5rem;
  display: flex;
  justify-content: center;
  /* 水平居中内容 */
  align-items: center;
  /* 垂直居中内容 */
  font-size: 1.5vh;
}

.title_plat {
  width: 12.125rem;
  height: 1.5625rem;
  margin: 1.5625rem 0 0 3.4375rem;
}

.image_1 {
  width: 1.5625rem;
  height: 0.9375rem;
  margin-top: 0.3125rem;

}

.text_form {
  width: 9.9375rem;
  height: 2.5625rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.125rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 25px;
  margin-left: 0.5rem;
}
</style>